<template>
  <view class="details-container">
    <!-- 顶部产品信息区域 -->
   <view class="product-header">
      <image class="product-image" :src="subdata.image"></image>
      <view class="product-info">
		<view class="info-pr">
					   <view class="product-name">{{subdata.goods.title}}</view>
					     <view class="close-btn">×1</view>
		</view>
        <view class="product-features">支持指纹 | 密码 | 刷卡 | 微信小程序 | 钥匙开门</view>
        <view class="service-item">服务项目：安装</view>
      </view>
    </view>

    <!-- 详细信息区域 -->
	<view class="section-title">详细信息</view>
    <view class="details-section">

      <view class="info-item">
        <view class="info-label">姓名：</view>
        <view class="info-value">{{subdata.consignee}}</view>
      </view>
      <view class="info-item">
        <view class="info-label">联系方式：</view>
        <view class="info-value">
          <text>{{subdata.mobile}}</text>
          <image class="phone-icon" src="/static/img/dianhua.png"></image>
        </view>
      </view>
      <view class="info-item">
        <view class="info-label">地址</view>
        <view class="info-value">{{subdata.address}}</view>
      </view>
    </view>
	<view class="fiex" v-if="fagla">
		<view class="fiex-div">
		 <view class="fiex-ul">
			 <view class="ul-li">
				 <view class="li-images"><image class="li-img" src="/static/img/qian.png"></image></view>
				 <view class="li-text">请扫码支付</view>
			 </view>
			 <view class="ul-lis">
				<view class="lis-images"> <image class="lis-img" :src="wximg"></image></view>
			 </view>
		 </view>
		 <view class="fiex-li" @click="buttomqx()"><image class="fiex-li-images" src="/static/img/xx.png"></image></view>
		 </view>
	</view>
    <!-- 底部按钮区域 -->
    <view class="button-container">
      <button class="action-button pay-button" @click="saoma()">
        <image class="button-icon" src="/static/img/saom.png"></image>
        <text>扫码付款</text>
      </button>
      <button class="action-button video-button" @click="tiaozhuan()">
        <image class="button-icon" src="/static/img/shuangcuan.png"></image>
        <text>完工视频</text>
      </button>
    </view>

  </view>
</template>

<script>
	import { GetdetailData,GetpayeeQrCodeData } from '../../../api';
		let baseUrl = 'https://door.10906.cn/api/ '
export default {
  data() {
    return {
      // 可以在这里添加数据
	  subdata:{},
	  wximg:'',
	  fagla:false,
	  ids:''
    };
  },
  onLoad(options) {
	  this.ids=options.ids;
	    console.log('id',options.ids);
  	this.getbook();
  },
  methods: {
    // 可以在这里添加方法
	buttomqx(){
		this.fagla=false;
	},
	
	   async  getbook(){
		// let res = await uni.request({
		// 	url: baseUrl+`engineer/service/detail?ids=${1}`,
		// 	method: 'GET',
		// 	data: {
		// 		platform: 'WechatOfficialAccount'
		// 	}
		// })
		let res=await GetdetailData({ids:this.ids});
			 if(res.code==1){
				this.subdata=res.data;
			 }
		
			
			
		 },
		async saoma(){
			this.fagla=true;
			let res=await GetpayeeQrCodeData();
			if(res.code){
				// this.subdata=res.data.data
				this.wximg=res.data
				console.log(res.data);
			}
		},
		tiaozhuan(){
			wx.navigateTo({
			  url: '/pages/subindex/components/vio?id='+ this.ids // 目标页面路径，可带参数
			})
		}
  }
}
</script>

<style lang="scss">
/* 样式变量定义 */
$primary-color: #FF0101;
$text-color: #2D3046;
$text-secondary: #7A8195;
$background-color: #FFFFFF;
$border-color: #F0F0F0;
$border-radius: 20rpx;
$padding-base: 24rpx;
$padding-sm: 16rpx;
$font-large: 28rpx;
$font-medium: 26rpx;
$font-small: 24rpx;

// 主容器样式
.details-container {
	padding: 46rpx 20rpx;
  background-color: #F7F8FA;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
}

// 顶部产品信息区域
.product-header {
  display: flex;
  padding: 20rpx 18rpx;
 box-sizing: border-box;
 background-color: #fff;
 border-radius: 20rpx;
  .product-image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    margin-right: 24rpx;
  }

  .product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
     .info-pr{
		 display: flex;
		 justify-content: space-between;
		 margin-top: 8rpx;
		 margin-bottom: 14rpx;
		 .close-btn {
		   width: 40rpx;
		   height: 40rpx;
		   font-size: 36rpx;
		   color: $text-secondary;
		   display: flex;
		   justify-content: center;
		   align-items: center;
		 }
		 .product-name {
		   font-weight: 500;
		   font-size: 28rpx;
		   color: #2D3046;
		    font-weight: bold;
		 }
	 }
    // .product-name {
    //   font-size: 28;
    //   color:#000;
    //   font-weight: bold;
    //   margin-bottom: 12rpx;
    // }

    .product-features {
      font-size: 20rpx;
      color: #7A8195;
      margin-bottom: 28rpx;
    }

    .service-item {
      font-size: 26rpx;
      color: #7A8195;
    }
  }

  .close-btn {
    width: 40rpx;
    height: 40rpx;
    font-size: 36rpx;
    color: $text-secondary;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
  .section-title {
margin: 48rpx 0 36rpx 18rpx;
font-weight: 500;
font-size: 28rpx;
color: #2D3046;
  }
// 详细信息区域
.details-section {
  padding: 36rpx 23rpx;
  // border-bottom: 1rpx solid $border-color;
  background-color: #FFFFFF;
box-sizing: border-box;

  .info-item {
	  width: 664rpx;
	  height: 82rpx;
    display: flex;
	margin-bottom: 42rpx;
	
    // padding: 20rpx 0;
    border-bottom: 1rpx solid #EEEFF2;
	text-align: center;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      width: 206rpx;
      font-size: 28rpx;
      color: #6A7275;
	  text-align: left;
    }

    .info-value {
      flex: 1;
      font-size:28rpx;
      color: #0D0F0F;
      display: flex;
      // align-items: center;
	  text-align: left;
      justify-content: space-between;

      .phone-icon {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}

// 底部按钮区域
.button-container {
	position: absolute;
	bottom: 32rpx;
	left: 40rpx;
  // padding: 30rpx 24rpx;
  display: flex;
  flex-direction: column;
  // gap: 20rpx;

  .action-button {
   width: 668rpx;
   height: 84rpx;
   border-radius: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
   font-size: 32rpx;
    color: #FFFFFF;
	background-color: #F11C00;
    font-weight: bold;


    .button-icon {
      width: 42rpx;
      height: 42rpx;
      margin-right: 60rpx;
    }
  }

  .pay-button {
	  margin-bottom: 28rpx;
    background-color: $primary-color;
  }

  .video-button {
    background-color: $primary-color;
  }
}

.fiex{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	width: 100%;
	height: 100%;
background: rgba(0,0,0,0.59);
	// opacity: 0.5;
	// text-align: center;
	.fiex-div{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		// width: 558rpx;
		// justify-content: center;
		.fiex-ul{
			width: 558rpx;
			height: 586rpx;
			padding: 38rpx 80rpx 64rpx 80rpx;
			background-color: #fff;
			border-radius: 20rpx;
			box-sizing: border-box;
			.ul-li{
				width: 100%;
				display: flex;
                 justify-content: center;
				.li-images{
					width: 44rpx;
					height: 44rpx;
					.li-img{
						width: 44rpx;
						height: 44rpx;
					}
				}
				.li-text{
					margin-left: 20rpx;
					font-size: 32rpx;
					color: #221F1C;
				}
			}
			.ul-lis{
				margin-top: 42rpx;
				width: 398rpx;
				height: 398rpx;
				 .lis-images{
					 width: 398rpx;
					 height: 398rpx;
					 .lis-img{
						 width: 398rpx;
						 height: 398rpx;
					 }
				 }
			}
		}
		.fiex-li{
			margin-left: 250rpx;
			margin-top: 54rpx;
			width: 56rpx;
			height: 56rpx;
			.fiex-li-images{
				width: 56rpx;
				height: 56rpx;
			}
		}
	}
}
</style>